﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="adstemplate.aspx.cs" Inherits="ZF.WS.Admin.ads.adstemplate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../../css/common.css" rel="stylesheet" type="text/css" />
    <link href="../../css/css.css" rel="stylesheet" type="text/css" />
    <link href="../../css/default.css" rel="stylesheet" type="text/css" />

    <script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
        <script src="/js/jqPlugins/jquery.json-2.2.min.js" type="text/javascript"></script>
    <style>
        .map area.active { background: #eee; }
        a.divarea { background: #efefef; position: absolute; filter1: alpha(opacity=100); -moz-opacity: 0.9; opacity: 0.9; display: block; }
        a.active { filter1: alpha(opacity=51);  }
        a:hover.divarea { display: block; border: 1px solid #f00; position: absolute; filte1r: alpha(opacity=5); -moz-opacity: 0.9; opacity: 0.9; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img src="adst.gif" border="0" usemap="#Map" />
        <map name="Map" id="Map" class="map">
            <area shape="rect" coords="3,207,948,285" href="javascript:" class="active" runat="server" id="a1" />
            <area shape="rect" coords="3,1521,948,1621" href="javascript:" runat="server" id="a2" />
            <area shape="rect" coords="3,1896,948,1995" href="javascript:" runat="server" id="a3" />
            <area shape="rect" coords="0,2411,949,2510" href="javascript:" runat="server" id="a4" />
            <area shape="rect" coords="2,3008,948,3109" href="javascript:" runat="server" id="a5" />
            <area shape="rect" coords="2,3981,952,4080" href="javascript:" runat="server" id="a6"  />
           
        </map>
    </div>
    <div class="template dn_">
        <a class='divarea {5}' _style="left: {0}px; top: {1}px; width: {2}px; height: {3}px;" href='setIndexads.aspx?key={4}' target='mainFrame' name="{4}"> 
            <img src="/photo/ads/{6}" _style="height:{7}px;width:{2}px" />
        </a>
    </div>
    <script>
        var json = $.evalJSON('<%=this.Json %>');

        $(function() {

            $("#Map area").each(function() {

            var template = $(".template").html().replace("_style", "style").replace("_style", "style");
                var body = $(document.body);
                var coords = $(this).attr("coords").split(",");
                var id = this.id;
                var img = "";
                $(json).each(function() {
                    if (id == this.appKey) {
                        img = this.image;
                    }
                });

                var html = String.format(template, 0, coords[1], 950, coords[3] - coords[1] + 2, id,
                id == '<%=Key %>' ? "active" : "", img, coords[3] - coords[1]
                );
              
                body.append(html);
            });

            $("#a6")[0].focus();
            $(".divarea").click(function() {

            });

        });
    </script>
 
    </form>
</body>
</html>
